<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.mui-slider-indicator .mui-active.mui-indicator{
				background-color: #ff6464;
			}
		</style>
		<script src="js/vue.js"></script>
	</head>

	<body>
		
		<div id="app">
			<!-- 头部标题 -->
			<header class="mui-bar mui-bar-nav" v-if="isHeader">
				<a class="mui-icon mui-pull-right" id="closeAd">关闭</a>
				<!-- <h1 class="mui-title">热映</h1> -->
			</header>	
				
			<div class="mui-content">
				<!-- 引导页轮播图 -->
				<div id="slider" class="mui-slider">
					 <!-- mui-slider-loop -->
					<div class="mui-slider-group">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<!-- <div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/yidaoye3.png">
							</a>
						</div> -->
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<a data-href="http://www.taobao.com">
								<img src="images/yidaoye1.png">
							</a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<a data-href="http://jd.com">
								<img src="images/yidaoye2.png">
							</a>
						</div>
						<!-- 第三张 -->
						<div class="mui-slider-item">
							<a data-href="http://youku.com">
								<img src="images/yidaoye3.png">
							</a>
							<button type="button" class="mui-btn mui-btn-danger" id="tiyan" style="position: absolute;bottom: 40px;left: 50%;margin-left: -81px;padding: 10px 48px; font-size: 16px;">
								立即体验
							</button>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<!-- <div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="images/yidaoye1.png">
							</a>
						</div> -->
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
			</div>
		</div>
		
		
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			
			let APP = new Vue({
				el: '#app',
				data: {
					isHeader: false
				}
			});
			
			mui.init({
				swipeBack:true //启用右滑关闭功能
			})
			
			mui.plusReady(function () {
				// 设置轮播图的大小：设为手机屏幕的大小
				// 获取手机屏幕的大小：宽度、高度
				let w = plus.screen.resolutionWidth;
				let h = plus.screen.resolutionHeight;
				
				let embed;
				
				// 设置图片大小
				let imgs = document.querySelectorAll('.mui-slider-item img');
				for(let i=0; i<imgs.length; i++){
					imgs[i].style.width = w + 'px';
					imgs[i].style.height = h + 'px';
					
					// 点击图片标签，跳转
					imgs[i].addEventListener('tap',function(){
						
						// 显示头部，改变isHeader
						APP.isHeader = true;
						
						let href = this.parentNode.getAttribute('data-href');
						// mui.openWindow({
						// 	url : href,
						// 	createNew: true
						// });
						// 1、创建一个子窗口，加载外部链接的页面
						embed = plus.webview.create(href,'embed',{top: '45px',bottom:'0px'});
						// 2、获取当前引导页窗口
						let ws = plus.webview.currentWebview();
						// 3、添加上面创建的子窗口embed
						ws.append(embed);
						// 4、优化效果，对子窗口embed,加载的页面进行优化
						embed.addEventListener('loading',function(){
							// 显示加载效果
							plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});
						})
						embed.addEventListener('loaded',function(){
							// 隐藏加载效果
							plus.nativeUI.closeWaiting();
						})
					})
					
				}
				
				// 点击“立即体验”
				mui('#tiyan')[0].addEventListener('tap',function(){
					// 创建main窗口
					// let main = plus.webview.create('main.html','main');
					// main.show();
					
					// 记录体验状态
					plus.storage.setItem('isShow','true');
					
					mui.openWindow({
						url: 'main.html',
						show: {
							aniShow: 'none',
							duration: 10
						},
						waiting: {
							title:'正在加载...'
						}
					});
				})
				
				mui('#app').on('tap','#closeAd',function(){
					// 关闭子窗口embed
					plus.webview.close(embed);
					
					// 去掉头部
					APP.isHeader = false;
				})
				
				// 错误的绑定写法
				// mui('#closeAd')[0].addEventListener('tap',function(){
				// 	alert(1)
				// })
				
				// 重写APP的后退按钮的功能  mui.back()
				let first = null;
				mui.back = function(){
					
					if(!first){
						// 第1次点返回，或者是超过2秒点返回
						// 改变first的值，记录时间戳
						first = new Date().getTime();
						// 提示：
						mui.toast('再按一次退出应用');
						
						// 定时器，2秒后改为null
						setTimeout(function(){
							first = null;
						},2000)
						
						return false;
					}else{
						// 第2次点击返回，获取后面在2秒点返回的
						if(new Date().getTime() - first < 2000){
							// 关闭应用
							plus.runtime.quit();
						}
					}
				}
				
				plus.key.addEventListener('backbutton',function(){
					// 这个写法，是监听手机自带返回键的事件操作，不过还是有返回功能
				},false)
				
			})
			
		</script>
	</body>

</html>
